<template>
    <div id="my-city-box" class="city-box">
        <page-main>
            <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                <el-tab-pane label="国内" name="false"></el-tab-pane>
                <el-tab-pane label="国外" name="true"></el-tab-pane>
            </el-tabs>
            <div class="btn-box" style="margin-top:15px;margin-bottom: 15px;">
                <el-button type="primary" @click="append('one')">新增一级</el-button>

            </div>
            <el-tree :data="dataSource" node-key="id" :expand-on-click-node="false" :props="props">
                <template #default="{ node, data }">
                    <span class="custom-tree-node">
                        <span>{{ node.label }}</span>
                        <span class="tree-btn">
                            <el-button link type="primary" @click="append('two', data, node.level)"
                                v-if="node.level == 1">新增
                            </el-button>
                            <el-button link type="primary" @click="editCity(data, node.level)">编辑</el-button>
                            <el-button link type="primary"  @click="remove(node, data)">删除</el-button>
                        </span>
                    </span>
                </template>
            </el-tree>
        </page-main>
        <addAndEdit v-if="dialogVisible" :dialogVisible="dialogVisible" @handleClose="handleClose" :type="type"
            :pageType="pageType" @on-update="getList" :activeName="activeName" :dataForm="dataForm"
            :treeData="treeList"></addAndEdit>

    </div>
</template>
<script  setup name="Standard">
import { reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import api from '@/api'
import addAndEdit from './addAndEdit.vue'
import { treeData } from '@/util/index'


const treeList = ref([])

const dialogVisible = ref(false)


const type = ref('one')

const pageType = ref('add')

const activeName = ref('false')

const props = ref({
    label: 'areaName',
    children: 'children',

})
const dataSource = ref([])

const dataForm = ref({
    areaName: '',
    areaEnName:''
})

onMounted(() => {
    getList()
})


// 获取列表数据
const getList = () => {

    api.dataMaintenance.cityMangerList({ oversea: activeName.value }).then(res => {
        let result = treeData(res, 'areaCode', 'parentAreaCode')
        dataSource.value = result
        treeList.value = res
    })

}

const remove = (row) => {
    ElMessageBox.confirm(
        '您确定要进行删除操作吗?',
        '温馨提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            api.dataMaintenance.cityMangerDelete({ id: row.data.id }).then(res => {
                getList()
                ElMessage.success('操作成功')
            })
        })
}


const append = (soruce, data) => {
    console.log(soruce, data)
    if (data) {
        data['parentAreaCode'] = data.areaCode
        data['areaEnName'] =''
        dataForm.value = { ...data }
    }
    type.value = soruce
    pageType.value = 'add'
    dialogVisible.value = true
}

const editCity = (data, level) => {
    pageType.value = 'edit'
    dataForm.value = { ...data }
    dialogVisible.value = true
    type.value = level == 1 ? 'one' : 'two'
    console.log(data)
}
const handleClose = () => {
    dialogVisible.value = false
}
const handleClick = (tab, event) => {
    console.log(tab.index, event)
    getList()
}


onActivated(() => {
    getList()

})
</script>
<style lang="scss">
.city-box {
    padding: 10px 20px;
    background: #fff;
    .el-tree-node__content {
        height: 32px;
    }
}
</style>
<style lang="scss" scoped>
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}

.tree-btn {
  a {
    margin-right: 20px;
  }
}
</style>
<style lang="scss">
#my-city-box{
  .el-tabs__item{
    padding-right: 26px;
    padding-left: 0;
  }
  .el-tree-node__content{
    border-bottom: 1px solid #f0f0f0;
  }
}
</style>